<template>
	<el-dialog :close-on-click-modal="false" :title="parameter.id ? ' 编辑' : '添加'" :visible.sync="show" v-if="show" width="45%" v-loading="loading">
		<el-form ref="form" :model="request.data" :inline="true" label-width="80px" :rules="rules">
					<el-row>
						<el-col :span="12">
							<el-form-item label="企业名称:" prop="ename"><el-input v-model="request.data.ename" autocomplete="off"></el-input></el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="企业地址:" prop="address"><el-input v-model="request.data.address" autocomplete="off"></el-input></el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="企业码:" prop="code"><el-input v-model="request.data.code" autocomplete="off"></el-input></el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="联系电话:" prop="phone"><el-input v-model="request.data.phone" autocomplete="off"></el-input></el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="企业类型:">
								<el-select v-model="request.data.type" placeholder="请选择">
									<el-option label="已签约" :value="1"></el-option>
									<el-option label="未签约" :value="2"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="request.data.type == 1">
							<el-form-item label="签约日期:" prop="signtm">
								<el-date-picker v-model="request.data.signtm" type="date" placeholder="选择日期">
								</el-date-picker>
								</el-form-item>
						</el-col>
					</el-row>
					<el-row>
					<el-col :span="12">
						<el-form-item label="餐标:" prop="std"><el-input v-model="request.data.std" autocomplete="off"></el-input></el-form-item>
					</el-col>
					<el-col :span="12" v-if="request.data.type == 2">
						<el-form-item label="配送费:" prop="sendcost"><el-input v-model="request.data.sendcost" autocomplete="off"></el-input></el-form-item>
					</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="送餐开始:" prop="begintime">
								<el-date-picker v-model="request.data.begintime" type="date" placeholder="选择日期">
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="送餐终止:" prop="endtime">
								<el-date-picker v-model="request.data.endtime" type="date" placeholder="选择日期">
								</el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					
				<el-row>
					<el-col :span="12">
						<el-form-item label="订餐时段:">
							<el-select v-model="dtype" placeholder="请选择">
								<el-option label="午餐" :value="1"></el-option>
								<el-option label="晚餐" :value="2"></el-option>
								<el-option label="午餐+晚餐" :value="3"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					
					<el-col :span="12" v-if="request.data.type == 1">
							<el-form-item label="用餐人数:" prop="empcnt"><el-input v-model="request.data.empcnt" autocomplete="off"></el-input></el-form-item>
					</el-col>
				</el-row>
					
					<el-row v-if="dtype ==1 || dtype == 3">
						<el-col :span="12">
							<el-form-item label="午餐截单:" prop="endlch">
								<el-time-picker
								    v-model="request.data.endlch"
								    :picker-options="{
								      selectableRange: '00:00:00 - 23:59:59'
								    }"
								    placeholder="选择截单时间">
								  </el-time-picker>
								</el-form-item>
						</el-col>
					</el-row>
					
					<el-row v-if="dtype == 2 ||dtype == 3">
						<el-col :span="12">
							<el-form-item label="晚餐截单:" prop="enddnr">
								<el-time-picker
								    v-model="request.data.enddnr"
								    :picker-options="{
								      selectableRange: '00:00:00 - 23:59:59'
								    }"
								    placeholder="选择截单时间">
								  </el-time-picker>
								</el-form-item>
						</el-col>
					</el-row>

				<el-row>
					<el-col :span="24">
						<el-form-item label="企业logo:" prop="logo">
							<el-upload class="avatar-uploader" :action="picUrl" 
							:headers="uploadHeaders" :show-file-list="false" :on-success="handleAvatarSuccess"
							 :before-upload="beforeAvatarUpload">
								<img v-if="url1" :src="url1" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
							<el-input v-model="request.data.logo" autocomplete="off" type="hidden"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="形象图片:" prop="pic">
							<el-upload class="avatar-uploader" :action="picUrl" 
							:headers="uploadHeaders" :show-file-list="false" :on-success="handleAvatarSuccess2"
							 :before-upload="beforeAvatarUpload">
								<img v-if="url2" :src="url2" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
							<el-input v-model="request.data.pic" autocomplete="off" type="hidden"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
						
					
				
					
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button type="primary" @click="submitForm('form')">确 定</el-button>
			<el-button @click="show = false">取 消</el-button>
		</div>
	</el-dialog>
</template>

<script>
import constant from 'util/constant.js';
import utils from 'util/utils.js';
import validate from 'util/validate.js';
import api from 'api/crm/enterprise/enterprise.js';
import caches from 'util/caches.js';

export default {
	name: 'edit',
	data() {
		return {
			loading: false,
			show: this.isDisplay,
			request: utils.newRequest(), 
			uploadHeaders: {
								"jwttoken": caches.token.get()
							},
			picUrl: constant.serverUrl + "/crm/enterprise/uploadPic",
			dtype:3,
			url1: '',
			url2:'',
			rules: {
						ename: [
							{
								validator: validate.required,
								trigger: 'blur'
							}
						],
						signtm: [
							{
								validator: validate.required,
								trigger: 'blur'
							}
						],
						code: [
							{
								validator: validate.required,
								trigger: 'blur'
							}
						],
						type: [
							{
								validator: validate.required,
								trigger: 'blur'
							}
						],
						begintime: [
							{
								validator: validate.required,
								trigger: 'blur'
							}
						],
						endtime: [
							{
								validator: validate.required,
								trigger: 'blur'
							}
						],
						endlch: [
							{
								validator: validate.required,
								trigger: 'blur'
							}
						],
						enddnr: [
							{
								validator: validate.required,
								trigger: 'blur'
							}
						],
						address: [
							{
								validator: validate.required,
								trigger: 'blur'
							}
						],
						phone: [
							{
								validator: validate.required,
								trigger: 'blur'
							}
						],
						logo: [
							{
								validator: validate.required,
								trigger: 'blur'
							}
						],
						pic: [
							{
								validator: validate.required,
								trigger: 'blur'
							}
						],
						std: [
							{
								validator: validate.required,
								trigger: 'blur'
							}
						],
						empcnt: [
							{
								validator: validate.required,
								trigger: 'blur'
							}
						]
			}
		};
	},
	methods: {
		handleAvatarSuccess(res, file) {
			if (res.code == constant.response.code.success) {
				//响应码为成功
				utils.msg.success(res.msg);
				this.url1 = URL.createObjectURL(file.raw);
				//把响应 的url设置在请求的参数里面
				this.request.data.logo=res.data;
			}else{
				utils.msg.warning(res.msg);
			}
		},
		
		handleAvatarSuccess2(res, file) {
			if (res.code == constant.response.code.success) {
				//响应码为成功
				utils.msg.success(res.msg);
				this.url2 = URL.createObjectURL(file.raw);
				//把响应 的url设置在请求的参数里面
				this.request.data.pic=res.data;
			}else{
				utils.msg.warning(res.msg);
			}
		},
		
		beforeAvatarUpload(file) {
			if (typeof file !== 'string') return;
			let name = file.toLowerCase();
			return name.endsWith('.png') || name.endsWith('.jpeg') || name.endsWith('.jpg') || name.endsWith('.png');
		},
		
		//提交表单
		submitForm(formName) {
			utils.checkForm(this.$refs[formName], () => {
				this.loading = true;
				if (this.parameter.id) {
					//编辑
					api.update(
						this.request,
						response => {
							utils.msg.success(response.msg);
							this.loading = false;
							this.show = false;
							this.$parent.list(this.$parent.request);
						},
						response => {
							utils.msg.warning(response.msg);
							this.loading = false;
						}
					);
				} else {
					if(!this.request.data.logo){
							utils.msg.warning("必须上传图片");
							this.loading=false;
							return ;
						}
					if(!this.request.data.pic){
							utils.msg.warning("必须上传图片");
							this.loading=false;
							return ;
						}
					//添加
					api.save(
						this.request,
						response => {
							utils.msg.success(response.msg);
							this.loading = false;
							this.show = false;
							this.$parent.list(this.$parent.request);
						},
						response => {
							utils.msg.warning(response.msg);
							this.loading = false;
						}
					);
				}
			});
		},  
		init() {
			this.request = utils.newRequest();
			if (this.parameter.id) {
				//编辑
				this.request.param.id = this.parameter.id;
				api.toUpdate(this.request, response => {
					this.request.data = response.data;
					this.url1=this.request.data.logo;
					this.url2=this.request.data.pic;
					//element TimePicker 时间选择器回显，需要是Date类型的时间戳，因此后台直接传就可以了
					if(this.request.data.endlch == null ){
						this.dtype=2;
					}else if(this.request.data.enddnr == null){
						this.dtype=1;
					}else{
						this.dtype=3;
					}
					
				});
			} else {
				this.url1="";
				this.url2="";
				//添加
			}
		}
	},
	props: {
		isDisplay: {
			type: Boolean,
			default() {
				return false;
			}
		},
		parameter: {
			type: Array | Object,
			default() {
				return {};
			}
		}
	},
	watch: {
		isDisplay(val) {
			this.show = val;
			if (val) {
				this.init();
			}
		},
		show(val) {
			this.$emit('update:isDisplay', val);
		},
		parameter(val) {
			this.parameter = val;
		}
	}
};
</script>

<style lang="scss">
@import '~common/custom/css/common.scss';


</style>
